<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Schema Visualizer</title>
    <style>
        .sk-cube-grid {
            width: 40px;
            height: 40px;
            margin: 100px auto;
        }

        .sk-cube-grid .sk-cube {
            width: 33%;
            height: 33%;
            background-color: #0081c9;
            float: left;
            -webkit-animation: sk-cubeGridScaleDelay 1.0s infinite ease-in-out;
            animation: sk-cubeGridScaleDelay 1.0s infinite ease-in-out;
        }

        .sk-cube-grid .sk-cube1 {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .sk-cube-grid .sk-cube2 {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }

        .sk-cube-grid .sk-cube3 {
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }

        .sk-cube-grid .sk-cube4 {
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }

        .sk-cube-grid .sk-cube5 {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .sk-cube-grid .sk-cube6 {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }

        .sk-cube-grid .sk-cube7 {
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }

        .sk-cube-grid .sk-cube8 {
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }

        .sk-cube-grid .sk-cube9 {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        @-webkit-keyframes sk-cubeGridScaleDelay {

            0%,
            70%,
            100% {
                -webkit-transform: scale3D(1, 1, 1);
                transform: scale3D(1, 1, 1);
            }

            35% {
                -webkit-transform: scale3D(0, 0, 1);
                transform: scale3D(0, 0, 1);
            }
        }

        @keyframes sk-cubeGridScaleDelay {

            0%,
            70%,
            100% {
                -webkit-transform: scale3D(1, 1, 1);
                transform: scale3D(1, 1, 1);
            }

            35% {
                -webkit-transform: scale3D(0, 0, 1);
                transform: scale3D(0, 0, 1);
            }
        }
    </style>
</head>

<body id="page-top" class="sidebar-toggled">
<div id="loading-icon" style="visibility: initial;">
    <div class="sk-cube-grid">
        <div class="sk-cube sk-cube1"></div>
        <div class="sk-cube sk-cube2"></div>
        <div class="sk-cube sk-cube3"></div>
        <div class="sk-cube sk-cube4"></div>
        <div class="sk-cube sk-cube5"></div>
        <div class="sk-cube sk-cube6"></div>
        <div class="sk-cube sk-cube7"></div>
        <div class="sk-cube sk-cube8"></div>
        <div class="sk-cube sk-cube9"></div>
    </div>
</div>
<!-- Page Wrapper -->
<div id="wrapper" style="visibility: hidden;">

    <!-- Sidebar -->

    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">
        <!-- Main Content -->
        <div id="content-x">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) -->
                <button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>

                <div class=""><strong> Schema Visualizer </strong> - a Diagramming Tool for JSON and JSON-Schema (Demo Version)
                </div>
            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-12">
                        <div class="card mb-4">
                            <div class="card-body">
                                <div class="d-inline mr-1">
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle mb-1" type="button"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="icon"><i class="fas fa-file-import"></i></span>
                                            <span class="text btn-text">Import</span>
                                        </button>
                                        <div class="dropdown-menu">
                                            <button id="json-doc-button" class="dropdown-item">JSON Document</button>
                                            <div class="dropdown-divider"></div>
                                            <button id="json-schema-button" class="dropdown-item">JSON-Schema</button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">
                                                Serialized Diagrams
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-inline mr-1">
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle mb-1" type="button"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="icon"><i class="fas fa-plus"></i></i></span>
                                            <span class="text btn-text">New</span>
                                        </button>
                                        <div class="dropdown-menu">
                                            <button id="schema-editor-btn" class="dropdown-item">Entity Type</button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">
                                                Attribute / Property
                                            </button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">
                                                Reference Line
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-inline mr-1">
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle mb-1" type="button"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="icon"><i class="fas fa-edit"></i></span>
                                            <span class="text btn-text">Edit</span>
                                        </button>
                                        <div class="dropdown-menu">
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">
                                                Entity Type
                                            </button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">
                                                Attribute / Property
                                            </button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">
                                                Reference Line
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="vertical-divider ml-2 mr-2"></div>
                                <!-- Zoom controllers -->
                                <div class="d-inline">
                                    <a href="#" id="zoom-out-btn" class="btn btn-sm btn-outline-secondary mr-1 mb-1">
                                        <span class="icon"><i class="fas fa-search-minus"></i></span>
                                        <span class="text btn-text">Zoom Out</span>
                                    </a>

                                    <a href="#" id="zoom-reset-btn"
                                       class="btn btn-sm btn-outline-secondary mr-1 mb-1">
                                        <span class="icon"><i class="fas fa-expand"></i></span>
                                        <span class="text btn-text">Reset Zoom</span>
                                    </a>

                                    <a href="#" id="zoom-in-btn" class="btn btn-sm btn-outline-secondary mb-1">
                                        <span class="icon"><i class="fas fa-search-plus"></i></span>
                                        <span class="text btn-text">Zoom In</span>
                                    </a>
                                </div>
                                <div class="vertical-divider ml-2 mr-2"></div>
                                <div class="d-inline">
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle mb-1" type="button"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="icon"><i class="fas fa-stream"></i></span>
                                            <span class="text btn-text">Examples</span>
                                        </button>
                                        <div class="dropdown-menu">
                                            <button id="migcast-db-btn" class="dropdown-item">MigCast DB Schema</button>
                                            <div class="dropdown-divider"></div>
                                            <button id="species-db-btn" class="dropdown-item">Species DB Schema</button>
                                            <div class="dropdown-divider"></div>
                                            <button id="movielens-db-btn" class="dropdown-item">MovieLens DB Schema</button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">Social Network DB Schema</button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">Online Shop DB Schema</button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">Company DB Schema</button>
                                            <div class="dropdown-divider"></div>
                                            <button class="dropdown-item disabled" style="text-decoration: line-through;">Library DB Schema</button>
                                        </div>
                                    </div>
                                </div>
                                <!--
                                <div class="vertical-divider ml-2 mr-2"></div>
                                <div class="d-inline">
                                    <button id="serialization-btn" class="btn btn-sm btn-outline-secondary mr-1 mb-1">
                                        <span class="icon"><i class="fas fa-save"></i></span>
                                        <span class="text btn-text">Serialize the Diagrams</span>
                                    </button>

                                    <button id="deserialization-btn" class="btn btn-sm btn-outline-secondary mr-1 mb-1">
                                        <span class="icon"><i class="fas fa-folder-open"></i></span>
                                        <span class="text btn-text">Deserialize the Diagrams</span>
                                    </button>
                                </div>
                                -->

                                <!-- End of Zoom controllers -->

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->

        </div>

        <!-- End of Main Content -->

        <!-- Paper holder -->
        <div id="paper-holder">
            <div class="container-fluid h-100">
                <div class="row h-100">
                    <div class="col-12 h-100">
                        <div class="card mb-4 h-100">
                            <div class="card-body h-100">
                                <!-- JointJs Paper -->
                                <div id="paper-html-elements"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Paper holder -->

        <!-- Bootstrap Modals -->
        <div class="modal fade" id="jsonEditorModal" tabindex="-1" role="dialog" aria-hidden="true"
             data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- the title will be updated through jQuery -->
                        <h5 class="modal-title"> MODAL_TITLE </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="entity-type-name-form" class="pt-3 pl-3 pr-3 mb-3">
                            <div class="form-group row">
                                <label for="entity-type-name-input" class="col-sm-3 col-form-label col-form-label-sm">
                                    Entity type name:
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control form-control-sm is-invalid"
                                           id="entity-type-name-input" placeholder="Please enter an entity type name "
                                           required>
                                    <div class="invalid-feedback">
                                        Please choose a valid name containing only the allowed characters: a-zA-Z0-9_
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div id="json-editor" class="jsoneditor-wrapper"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
                        <!-- the button text will be updated through jQuery -->
                        <button class="btn btn-sm btn-primary" disabled="true" id="json-editor-action-btn"
                                type="button">
                            BTN_TEXT
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="schema-editor-modal" tabindex="-1" role="dialog" aria-hidden="true"
             data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- the title will be updated through jQuery -->
                        <h5 class="modal-title"> Create a new Entity Type </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="form-schema-editor-title" class="pt-3 pl-3 pr-3 mb-3">
                            <div class="form-group row">
                                <label for="schema-title-input" class="col-sm-3 col-form-label col-form-label-sm">
                                    Entity type name:
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control form-control-sm is-invalid"
                                           id="schema-title-input" placeholder="Please enter an entity type name "
                                           required>
                                    <div class="invalid-feedback">
                                        Please choose a valid name containing only the allowed characters: a-zA-Z0-9_
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div id="schema-editor"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
                        <!--
                        <button id="parser-btn" class="btn btn-sm btn-outline-success">Parse to JSON-Schema</button>
                        -->
                        <button type="button" class="btn btn-sm btn-primary visualize-btn" disabled="true">
                            Visualize
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="update-cardinality-modal" tabindex="-1" role="dialog" aria-hidden="true"
             data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"> Update the cardinality </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="cardinality-selection">Select the cardinality:</label>
                                <select id="cardinality-selection" class="custom-select custom-select-sm ml-3">
                                    <option value="0..1"> 0..1 (at most one)</option>
                                    <option value="1..1"> 1..1 (exact one)</option>
                                    <option value="1..N"> 1..N (at least one)</option>
                                    <option value="0..N" selected> 0..N (any)</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
                        <button id="update-cardinality-btn" type="button" class="btn btn-sm btn-primary">
                            Update
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <!-- End of Bootstrap Modals -->

        <!-- Footer -->
        <footer class="sticky-footer bg-white">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Shamil Nabiyev </span> |
                    <a href="https://github.com/shamilnabiyev/schema-visualizer-v2" target="_" rel="noopener noreferrer">GitHub</a>
                </div>
            </div>
        </footer>
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

</body>

</html>
